<template>
  <KView class="group-bargain-goods-item" @click="itemClick">
    <KView class="goods-item-pic">
      <sys-image class="auction-goods-img" :src="goods.pic" mode="auto" :radius="8"></sys-image>
    </KView>
    <KView class="goods-item-info clearfix">
      <KView class="goods-item-name ellipsis">{{goods.name}}</KView>
      <KView class="goods-item-arrow">
        <sys-svg name="arrowRight" color="#2f3135"></sys-svg>
      </KView>
    </KView>
    <KView class="goods-item-footer">
      <KView class="goods-item-btn" :class="`goods-item-btn_type${goods.type}`">
        <KView>
          <KView class="goods-item-btn-img">
            <img v-if="goods.type===0" class="sys-img" :src="imgData.groupGoods" mode="aspectFit">
            <img v-else class="sys-img" :src="imgData.bargainGoods" mode="aspectFit">
          </KView>
          <KView class="goods-item-btn-text">{{goods.typeText}}</KView>
        </KView>
      </KView>
      <KView class="goods-item-data">
        <KView class="goods-item-data-price">¥{{goods.price}}</KView>
        <KView class="goods-item-data-sourcePrice">¥{{goods.sourcePrice}}</KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysImage from 'common/sysImage';
  import SysSvg from 'common/sysSvg';

  import GlobalData from 'utils/globalData';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      }
    },

    data() {
      let imgData = GlobalData.images.groupBargain;
      return {
        imgData
      };
    },

    methods: {
      itemClick() {
        this.$emit('item-click', this.goods);
      }
    },

    components: {
      SysImage,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .group-bargain-goods-item {
    height: 100%;

    .goods-item-pic {
      height: calc(#{formatPx(325)} - 2px);
      border: 1px solid #F0F0F0;
      border-radius: 8px;
      overflow: hidden;
    }

    .goods-item-info {
      height: formatPx(30);
      margin-top: formatPx(26);

      >div {
        height: 100%;
      }

      .goods-item-name {
        float: left;
        color: #2f3135;
        line-height: formatPx(30);
        font-size: formatPx(30);
        width: formatPx(290);
      }

      .goods-item-arrow {
        float: right;
        width: formatPx(30);
      }
    }

    .goods-item-footer {
      margin-top: formatPx(26);
      height: formatPx(80);

      >div {
        height: 100%;
      }

      .goods-item-btn {
        float: left;
        width: formatPx(130);

        >div {
          margin: formatPx(17) 0;
          height: formatPx(46);
          line-height: formatPx(46);
          color: #ffffff;
          border-radius: formatPx(23);
          padding: 0 formatPx(18);

          >div {
            float: left;
            height: 100%;
          }

          .goods-item-btn-img {
            width: formatPx(30);
            margin-right: formatPx(6);
          }

          .goods-item-btn-text {
            font-size: formatPx(28);
          }
        }

        &.goods-item-btn_type0>div {
          background: #ff6f2f;
        }

        &.goods-item-btn_type1>div {
          background: #ff1f1f;
        }
      }

      .goods-item-data {
        float: right;
        width: formatPx(180);
        text-align: right;
        font-size: formatPx(30);

        >div {
          height: formatPx(30);
          line-height: formatPx(30);
        }

        .goods-item-data-price {
          color: #fd5a3a;
          margin-bottom: formatPx(10);
          padding-top: formatPx(6);
        }

        .goods-item-data-sourcePrice {
          color: #b3b9c2;
          text-decoration: line-through;
        }
      }
    }
  }

</style>
